<template>
<el-checkbox-group
    style="float:left;"
    v-model="form[item.prop]"
    size="default">
      <span v-if="item.events&&item.events.addClick" style="margin:0px;">
          <el-button type="primary"
                     size="default"
                     style="float:left;margin:0px;"
                     icon="el-icon-plus"
                     @click="item.events.addClick()" plain ></el-button>
      </span>
    <el-checkbox
            v-if="item.type=='checkbox'"
            size="default"
            style="margin-right:16px; "
            :disabled="item.disabled ? item.disabled : false"
            @change=" item.$events && item.$events.changeSelect ? item.$events.changeSelect($event,form,opt) : null "
            v-for="opt in options"
            :label="(item.initDatas&&item.initDatas.value)?opt[item.initDatas.value]:opt.value" :key="opt.value">{{(item.initDatas&&item.initDatas.name)?opt[item.initDatas.name]:opt.label}}</el-checkbox>
    <el-checkbox-button
            v-if="item.type=='checkbox-button'"
            size="default"
            style="margin:0px; "
            @change=" item.$events && item.$events.changeSelect ? item.$events.changeSelect($event,form,opt) : null "
            v-for="opt in options"
            :label="opt.value" :key="opt.value">
                <span  @click="item.events && item.events.click ? item.events.click(opt) : null">
                  {{opt.label}}
                </span>
    </el-checkbox-button>
</el-checkbox-group>


</template>
<script setup>
const props = defineProps({
    item :{
                required:true,
                type:Object,
            },
            form:{
                required:true,
                type:Object,
            }
})
let options=reactive([])
function getOptions(){
    var url = props.item.url;
    var param = props.item.params ;
    if(!url){return null; }
    this.$axios
        .post(url,param)
        .then(res => {
            if(res.status == 200 && res.data.code == 1){
                options = res.data.result;
                console.log(options);
            }else{
                this.$message({
                    type:"error",
                    message:'数据查询失败，请稍后重试！！！'
                });
            }
        });
}  
watch(props.item, (value) => {
  if (value.url) {
    getOptions()
  } else {
    options = value.options
  }
})
</script>
<style>

</style>






